@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../../assets/fonts/Inter.ttf')
}

html,
body,
#app,
#react-page {
  --fontControlSize: 12px;
  --fontSize: 16px;
  --fontSubtitleSize: 18px;
  --fontTitleSize: 22px;

  margin: 0;
  padding: 0;
  outline: none;
  border: 0;
  height: 100%;

  font: {
    family: 'Inter', sans-serif;
    size: var(--fontSize);
    weight: 400;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

#body {
  overflow-y: auto;
  height: 100%;
}

.hover:hover {
  cursor: pointer;
}

.hidden {
  display: none;
}

.section {
  padding: 30px 0px;
  border-bottom: 1px solid var(--borders);

  &_end {
    border-bottom: 0px;
  }
}

.grid {
  display: grid;

  &_1x2 {
    grid-template-columns: 1fr 1fr;
  }

  &_1x3 {
    grid-template-columns: 10fr 2fr 10fr;
  }

  &_1x3_input {
    grid-template-columns: 10fr 30px 10fr;
  }
}

.grid_cgap5per {
  grid-column-gap: 5%;
}

.justify__content {
  justify-content: left;

  &_center {
    justify-content: center;
  }

  &_right {
    justify-content: right;
  }

  &_space_around {
    justify-content: space-around;
  }
}

.align_items_center {
  align-items: center;
}

.flex {
  display: flex;

  &_column {
    flex-direction: column;
  }

  &_grow_1 {
    flex-grow: 1;
  }
}

.width {
  &_60px {
    width: 60px;
  }
  &_100px {
    width: 100px;
  }
  &_110px {
    width: 110px;
  }
  &_120px {
    width: 120px;
  }
}

.border_light {
  border: 1px solid var(--borders);
}

.pad {
  &_left {
    &_6px {
      padding-left: 6px;
    }
    &_10px {
      padding-left: 10px;
    }
  }

  &_top {
    &_10px {
      padding-top: 10px;
    }
  }
}

.marg {
  &_right {
    &_10px {
      margin-right: 10px;
    }
  }
}

.pointer_events_none {
  pointer-events: none;
}
